<script>
    // 创建一个全局遍历，用来接收当前正在变化的effect
    let activeEffect = null;
    class Dep {
        constructor(value) {
            this._value = value;
            this.effects = new Set(); //使用Set对象存放所有effect
        }
        get value() {
            this.track()
            return this._value;
        }
        set value(newValue) {
            if (newValue != this._value) {
                this._value = newValue;
            }
            this.trigger()
        }
        
        track() {
            if (activeEffect) {
                this.effects.add(activeEffect);
            }
        }
        trigger() {
            this.effects.forEach(effect => {
                effect()
            })
        }
    }

    function watchEffect(effect) {
        activeEffect = effect;
        effect();
        activeEffect = null;
    }
    let hDep = new Dep("hello");
    // 在getter和setter方法中，添加的track()和trigger方法，不用手动触发
    // 会在对象取值时，添加track()依赖追踪
    watchEffect(() => {
        // 添加依赖收集
        // hDep.track();
        console.log('effect', hDep.value);
    })
    // 触发更新
    // hDep.trigger();
    // 在赋值时，进行更新
    hDep.value = 'world'
</script>